<template>
	<!-- <view class="d-ccc" style="background-image: url('/static/dabeij.png');background-size: 100% 100%;
		height:88vh;"> -->
	<view class="d-ccc">
		<view class="nanj flex-between">
			<view class="nanj_s flex-between">
				<image src="../../static/logo@2x.png" mode="" style="width: 374rpx;height: 104rpx;"></image>
			</view>
		</view>
		<view class="d-biaoti">
			<image class="d-name" src="../../static/xqname.png" mode=""></image>
		</view>
		<view class="d-zhanghao">
			<view class="d-zh">
				<view class="" style="margin-left: 30rpx;">
					账号
				</view>
				<view class="">
					<input type="text" placeholder="请输入账号" class="catname" v-model="member_phone" />
				</view>
			</view>
			<view class="d-ma">
				<view class="" style="margin-left: 30rpx;">
					密码
				</view>
				<view class="" style="display: flex;flex-direction: row; justify-content: space-between;flex: 1;">
					<input type="password" placeholder="请输入密码" class="catname" v-model="member_password"  maxlength="8"/>
					<view class="uni-icon"  @click="clearIcon"><u-icon name="close-circle" size="18"></u-icon></view>
				</view>
			</view>
		</view>
		<view class="btns flex-between" @click="onlogin">
			<view>登录</view>
		</view>
		<view class="btn_s flex-between">
			<view class="b_tns flex-between">
				<view @click="onuserinfo">暂无账号请提交认证></view>
				<view @click="onquery">查询账号认证状态></view>
			</view>
		</view>
		<!-- <view class="t_els flex-between">
			您好!预约系统正在测试中，预计于7月10日正式开放。
		</view> -->
		<view class="tel_s flex-between">
			<view class="tel_sw flex-between">
				<image @click="onphone" src="../../static/tel.png" mode="" style="width: 85rpx;height: 85rpx;"></image>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getMember,
		login
	} from '@/common/api';
	export default {
		data() {
			return {
				member_password: '',
				member_phone: '',
				showClearIcon: false,
				venue_id:uni.getStorageSync('venue_id')
			};
		},
		methods: {
			clearInput() {
				this.showClearIcon = true;
			},
			offInput(){
				this.showClearIcon = false
			},
			clearIcon(){
				this.member_password = '';
				this.showClearIcon = false;
			},
			onphone() {
				uni.$u.route({
					url: '/pages/mine/ontel'
				});
			},
			onuserinfo() {
				uni.$u.route({
					url: '/pages/mine/audit'
				});
			},
			onquery() {
				uni.$u.route({
					url: '/pages/mine/query'
				});
			},
			onlogin() {

				if (!this.member_phone) {
					uni.$u.toast('请输入账号');
					return;
				}
				if (!this.member_password) {
					uni.$u.toast('请输入密码');
					return;
				}
				login({
					member_password: this.member_password,
					member_phone: this.member_phone,
					venue_id:'236'
				}).then(res => {
					console.log(res, 'pp')
					document.location.replace(res.url);
					uni.setStorageSync('authorization_token', res.authorization_token);
					uni.switchTab({
						url: '/pages/home/home'
					})
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.d-ccc {
		height: 100vh;
		// background-color: #59a0ff;

	}

	.d-name {
		width: 475rpx;
		height: 58rpx;
	}

	.d-biaoti {
		margin-top: 110rpx;
		margin-left: 70rpx;
	}

	.d-zhanghao {
		width: 610rpx;
		height: 211rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 44rpx 10rpx rgba(85, 186, 194, 0.09);
		border-radius: 30rpx;
		margin-top: 60rpx;
		margin-left: 70rpx;
	}

	.d-zh {
		height: 105rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1rpx #F5F5F5 solid;
		color: #999;
		font-size: 26rpx;
	}

	.catname {
		color: #999;
		margin-left: 30rpx;
		font-size: 26rpx;
	}
	
	.uni-icon{
		margin-right: 30rpx;
	}

	.btns {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 60rpx;

		view {
			width: 80%;
			height: 80rpx;
			background-color: #3c7efc;
			text-align: center;
			line-height: 80rpx;
			border-radius: 80rpx;
			color: #fff;
		}
	}

	.btn_s {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 30rpx;

		.b_tns {
			width: 80%;
			display: flex;

			view {
				font-size: 24rpx;
				color: #333333;
				justify-content: space-between;
			}
		}
	}

	.tel_s {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 120rpx;

		.tel_sw {
			width: 80%;
			display: flex;
			justify-content: center;

			view {
				font-size: 24rpx;
				color: #333333;
				justify-content: space-between;
			}
		}
	}

	.t_els {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
		font-size: 24rpx;
		color: #333333;

	}

	.nanj {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-top: 200rpx;

		.nanj_s {
			width: 80%;
			display: flex;
			justify-content: center;

			view {
				font-size: 24rpx;
				color: #333333;
				justify-content: space-between;
			}
		}
	}

	.d-ma {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 105rpx;
		color: #999;
		font-size: 26rpx;
	}

	.d-ff {
		color: #fff;
	}

	.d-bold {
		font-weight: bold;
	}

	.d-box {
		margin-top: -70rpx;
	}

	.d-card {
		background: #ffffff;
		box-shadow: 0rpx 5rpx 38rpx 0rpx rgba(6, 0, 1, 0.1);
		border-radius: 30rpx;
	}

	.d-type {
		// padding: 5rpx 10rpx;
		// background-color: #ffffff;
		color: #ffffff;
		border-radius: 4rpx;
		height: 36rpx;
		// padding: 0 18rpx;
	}
</style>